<template>
  <el-form-item label="规格选项">
    <el-card
      shadow="never"
      class="w-full mb-3"
      v-for="(item, index) in sku_card_list"
      :key="item.id"
      v-loading="item.loading"
    >
      <template #header>
        <div class="flex items-center">
          <el-input
            v-model="item.text"
            placeholder="规格名称"
            style="width: 200px"
            @change="handleUpdate(item)"
          >
            <template #append>
              <el-icon class="cursor-pointer" @click="hanldeChooseSku(item)">
                <more />
              </el-icon>
            </template>
          </el-input>

          <el-button class="ml-auto" size="small" @click="sortCard('up', index)" :disabled="index === 0">
            <el-icon>
              <Top />
            </el-icon>
          </el-button>

          <el-button size="small" @click="sortCard('down', index)" :disabled="index === sku_card_list.length - 1">
            <el-icon>
              <Bottom />
            </el-icon>
          </el-button>

          <el-popconfirm
            title="是否要删除该商品规格？ "
            confirmButtonText="确认"
            cancelButtonText="取消"
            @confirm="handleDelete(item)"
          >
            <template #reference>
              <el-button size="small">
                <el-icon>
                  <Delete />
                </el-icon>
              </el-button>
            </template>
          </el-popconfirm>
        </div>
      </template>

      <sku-card-item :skuCardId="item.id" />
    </el-card>

    <el-button type="success" size="small" @click="addSkuCardEvent" :loading="btnLoading">添加规格</el-button>
  </el-form-item>

  <ChooseSku ref="chooseSkuRef"/>   
</template>

<script setup>
  import { ref } from 'vue'
  import SkuCardItem from './SkuCardItem.vue'
  import ChooseSku from '@/components/ChooseSku.vue';
  import { 
    btnLoading, 
    sku_card_list, 
    addSkuCardEvent, 
    handleUpdate,
    handleDelete,
    sortCard,
    handleChooseSetGoodsSkuCard
  } from '@/hooks/useSku.js'

  const chooseSkuRef = ref(null)
  function hanldeChooseSku(item) {
    chooseSkuRef.value.open((value) => {
      handleChooseSetGoodsSkuCard(item.id, {
        name: value.name,
        value: value.list
      })
    })
  }
</script>

<style>
  .el-card__header {
    @apply !p-2 bg-gray-50;
  }
</style>
